<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- header -->
<div class="header">
    <div class="navber">
        <div class="container clearfix page">
            <div class="h-left">
                <a href="#changjian">创意简历</a>
            </div>
            <div class="h-right">
                <ul>
                    <li><a href="#guanyu">关于</a></li>
                    <li><a href="#jineng">技能专长</a></li>
                    <li><a href="#zuopin">作品集</a></li>
                    <li><a href="#lianxi">联系</a></li>
                </ul>
            </div>

            <div class="head-badder">
                    <div class="badder">
                        <a href=""><img src="img/anthony.jpg" alt=""></a>
                    </div>
                    <div class="h2">
                        <h2><a name="chuanjian">霍子龙</a></h2>
                        <p>网站开发人员,Web前端工程师</p>
                    </div>
                    <div class="a-2">
                        <a href="#guyong">雇佣我</a>
                        <a href="">下载简历</a>
                    </div>
                </div>  
        </div>
    </div>
</div>
<!-- /header -->
<!-- 关于 -->
<div class="main">
    <div class="main-inner">
        <div class="container">
            <div class="main-m clearfix">
                <div class="m-left">
                    <h4><a name="guanyu">关于</a></h4>
                    <P>你好！我是霍子龙，Web前端工程师</P>
                    <P>WEB前端开发是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文。自创建以来吸引了众多Web前端开发工程师的加盟，交流。

                            内容涵盖Web前端开发原创教程、技术中文文档、前端工具、资源分享、疑难解答、最新技术、招聘信息等，旨在为Web前端开发工程师及爱好者提供一个技术交流、经验分享的网站，不断追求更完善的用户体验！</P>
                </div>
                <div class="m-right clearfix">
                    <h4>基本信息</h4>
                    <span class="span-r">
                        <a href="" class="a-1">年龄</a>
                        <a href="" class="a-2">19（岁）</a>
                    </span>
                    <span class="span-r">
                            <a href="" class="a-1">电子邮件</a>
                            <a href="" class="a-2">3142622208@qq.com</a>
                    </span>
                    <span class="span-r">
                            <a href="" class="a-1">电话</a>
                            <a href="" class="a-2">18531038592</a>
                    </span>
                    <span class="span-r">
                            <a href="" class="a-1">地址</a>
                            <a href="" class="a-2">河北省-邯郸市</a>
                    </span>
                    <span class="span-r">
                            <a href="" class="a-1">语言</a>
                            <a href="" class="a-2">汉语</a>
                    </span>
                </div>
             </div>
        </div>
    </div>
</div>
<!-- 关于/ -->
<!-- 专业技能 -->
<div class="about">
        <div class="container">
            <h3><a name="jineng">专业技能</a></h3>
            <div class="about-t clearfix">
                <div class="about-l">
                    <div class="txt-t">
                        <span>的HTML</span>
                        <div class="txt-t-t">
                            <div class="t-t-1"></div>
                            <span>80%</span>
                        </div>
                    </div>
                    <div class="txt-t">
                            <span>的Css</span>
                            <div class="txt-t-t">
                                <div class="t-t-2"></div>
                                <span>70%</span>
                            </div>
                    </div>

                    <div class="txt-t">
                            <span>的JavaScript</span>
                            <div class="txt-t-t">
                                <div class="t-t-3"></div>
                                <span>50%</span>
                            </div>
                    </div>



                </div>
                <div class="about-r">
                        <div class="txt-t">
                                <span>的AJAX</span>
                                <div class="txt-t-t">
                                    <div class="t-t-4"></div>
                                    <span>30%</span>
                                </div>
                        </div>
                        <div class="txt-t">
                                <span>的Vue.js</span>
                                <div class="txt-t-t">
                                    <div class="t-t-5"></div>
                                    <span>20%</span>
                                </div>
                        </div>
                        <div class="txt-t">
                                <span>的</span>
                                <div class="txt-t-t">
                                    <div class="t-t-6"></div>
                                    <span>50%</span>
                                </div>
                        </div>
                </div>
            </div>
        </div>
</div>
<!-- 专业技能 -->

<!-- 作品集 -->
<!-- <div class="badder">
    <div class="container">
        <div class="badder-text">
            <h4><a name="">作品集</a></h4>
            <div class="nav-align-center">
                <ul>
                    <li class="activer"><a href=""><i class="fa fa-laptop"></i></a></li>
                </ul>
            </div>
            <div class="col">
                <img src="" alt="">
            </div>   
        </div>
    </div>
</div> -->
<!-- 作品集/ -->
<!-- 联系我 -->
<div class="footer">
    <div class="footer-inner">
        <div class="container">
            <div class="footer-t">
                <div class="t-f">
                    <div class="footer-top">
                        <h4><a name="lianxi">联系我</a></h4>
                    </div>
                    <div class="footer-buttom clearfix">
                        <div class="buttom-l">
                            <p><a name="guyong">随时联系我</a></p>
                            <form action="">
                                <div class="buttom-l-l">
                                    <span>
                                        <i class="fa fa-user-circle"></i>
                                    </span>
                                    <input type="text" placeholder="name">
                                </div>
                                <div class="buttom-l-l">
                                        <span>
                                            <i class="fa fa-file-text"></i>
                                        </span>
                                        <input type="text" placeholder="name">
                                </div>
                                <div class="buttom-l-l">
                                        <span>
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="text" placeholder="name">
                                </div>
                                <div class="buttom-l-ll">
                                    <button type="submit">发送</button>
                                </div>
                            </form>
                        </div>
                        <div class="buttom-r">
                            <div class="buttom-r-r">
                                <p>地址：河北省--邯郸市</p>
                                <p>电话：+185-3103-8592</p>
                                <p>电子邮件：3142622208@qq.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 联系/ -->
<!-- 底部 -->
<div class="footer-text">
    <div class="container">
        <div class="text-i">
            <span><i class="fa fa-facebook fa-2x "></i></span>
            <span><i class="fa fa-twitter fa-2x "></i></span>
            <span><i class="fa fa-google-plus fa-2x"></i></span>
            <span><i class="fa fa-instagram fa-2x "></i></span>
        </div>
        <div class="text-f">
            <p>© Creative CV. All rights reserved.</p>
        </div>
    </div>
</div>
<!-- 底部/ -->
</body>
</html>